<template>
    <div class="bottom-bar">
        <div class="check-content">
            <check-button class="check-button" :is-checked="isSelectAll" @click.native="checkClick"/>
            <span>全选</span>
        </div>

        <div class="price">
            合计{{totalPrice}}
        </div>

        <div class="calculate" @click="calcClick">
            去计算：({{checkLength}})
        </div>
    </div>
</template>

<script>
import CheckButton from 'components/content/checkButton/CheckButton'

export default {
    name:"CartBottomBar",
    components:{
        CheckButton
    },
    methods:{
        checkClick(){
            if(this.isSelectAll){
                this.$store.state.cartList.forEach(item => item.checked = false)
            }else{
                this.$store.state.cartList.forEach(item => item.checked = true)
            }
        },
        calcClick(){
            if(!this.checkLength){
                this.$toast.show('请选择要购买的商品',2000)
            }
        }
    },
    computed:{
        totalPrice(){
            return '￥' + this.$store.state.cartList.filter(item =>{
                return item.checked
            }).reduce((preValue,item)=>{
                return preValue+item.price * item.count
            },0).toFixed(2)
        },
        checkLength(){
            return this.$store.state.cartList.filter(item=> item.checked).length
        },
        isSelectAll(){

            
            // return !(this.$store.state.cartList.filter(item=> !item.checked).length)
            if(this.$store.state.cartList.length === 0) return false
            return !this.$store.state.cartList.find(item => !item.checked)
           
        }
    }

}
</script>

<style scoped>
.bottom-bar{
    display: flex;
    height: 40px;
    background-color: #eee;
    position: relative;
    line-height: 40px;
    font-size: 14px;
    
   
}
.check-content{
    display: flex;
    align-items: center;
    margin-left: 10px;
    width: 70px;
    margin-bottom: 5px;
}
.check-button{
    width: 24px;
    height: 16px;
    line-height: 22px;
    margin-right: 5px;
}
.price{
    margin-left: 30px;
    flex: 1;
   
   
}
.calculate{
     background-color: red;
    color: white;
    width: 90px;
     text-align: center;
}
</style>